<template>
    <div class="public_main_style">
        <!--  表格 -->
        <div class="public_main_table" v-loading="loading" element-loading-text="查询列表数据中...">
            <!-- 表格顶部插槽 -->
            <div class="table_solt_top">
                <slot name="head"></slot>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
                    size="small"
                    :row-class-name="tableRowClassName"
                    @selection-change="handlerSelection"
                    ref="selectTable"
                    :row-key="rowKey"
                    :tree-props="defaultChild"
            >
                <template v-for="(item,index) in columns">
                    <!-- 类型的 特殊表格-->
                    <el-table-column
                            v-if="item.type && item.type != 'radio'"
                            :type="item.type"
                            :width="item.width"
                            :label="item.label"
                            :fixed="item.fixed"
                            :key="index"
                            :align="item.align || 'center'"
                    ></el-table-column>
                    <!-- 单选 -->
                    <el-table-column
                            v-else-if="item.type == 'radio'"
                            :label="item.label"
                            :width="item.width"
                            :align="item.align || 'center'"
                            :fixed="item.fixed"
                            :key="index"
                    >
                        <template slot-scope="scope">
                            <el-radio class="template_radio" :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)"></el-radio>
                        </template>
                    </el-table-column>

                    <!-- 其余的普通表格-->
                    <el-table-column
                            v-else
                            :key="index"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width"
                            :fixed="item.fixed"
                            :show-overflow-tooltip="item.overTooltip"
                            :align="item.align || 'center'"
                    >
                        <!-- :show-overflow-tooltip="item.overTooltip" -->
                        <template slot-scope="{row, index}">
                            <!-- 调用自定义插槽 -->
                            <slot v-if="item.slotName" :name="item.slotName" :row="row" :index="index"></slot>
                            <!-- 调用自定义方法 -->
                            <span v-else-if="item.formartRow">{{item.formartRow(row[item.prop])}}</span>
                            <span v-else>{{row[item.prop]}}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <!-- 表格底部插槽 -->
            <div class="table_solt_bottom">
                <slot name="footer"></slot>
            </div>
        </div>
        <!-- 分页 -->
        <div class="pagination public_main_page" v-if="page.total > 0 || aPage.total > 0">
            <el-pagination
                    v-if="isArr"
                    background
                    small
                    layout="total, prev, pager, next, jumper, sizes"
                    :current-page="aPage.pageIndex"
                    :page-size="aPage.pageSize"
                    :total="aPage.total"
                    :page-sizes="pageSizeList"
                    @size-change="aPageSizeChange"
                    @current-change="aPageIndexChange"
            ></el-pagination>
            <el-pagination
                    v-else
                    background
                    small
                    layout="total, prev, pager, next, jumper, sizes"
                    :current-page="page.pageIndex"
                    :page-size="page.pageSize"
                    :total="page.total"
                    :page-sizes="pageSizeList"
                    @size-change="pageSizeChange"
                    @current-change="pageIndexChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ETable',
        components: {},
        props: {
            //表格头
            columns: {
                type: Array,
                default: () => [],
                required: true,
            },
            getData: {
                type: [Function, Array],
                default: () => {},
                required: true,
            },
            pageSizeList: {
                type: Array,
                default: () => [10, 20, 30, 40, 50, 100], //  1, 2
            },
            selected: {
                type: Array,
                default: () => {},
                required: false,
            },
            selectLable: {
                type: String,
                default: 'id',
                required: false,
            },
            rowKey: {
                type: String,
                default: 'id',
            },
        },
        data() {
            return {
                loading: false,
                tableData: [],
                page: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                },
                aPage: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                },
                isArr: false,
                defaultChild: {
                    children: 'list',
                    hasChildren: 'hasChildren',
                },

                radio:''
            }
        },
        watch: {
            getData: {
                handler(val) {
                    if (Array.isArray(val)) {
                        console.log("ETableVal",val)
                        this.isArr = true
                        this.aPage.total = val.length
                        this.tableData = val.slice(0, this.aPage.pageSize)
                    }
                },
                deep: true,
                immediate: true,
            }
        },
        created() {
            if (!this.isArr) {
                this.updateTable()
            }
        },
        methods: {
            //更新表格
            async updateTable(pageIndex, pageSize) {
                if (pageIndex) {
                    this.page.pageIndex = pageIndex || 1
                }
                if (pageSize) {
                    this.page.pageSize = pageSize || 10
                }
                try {
                    this.loading = true
                    let res = await this.getData({
                        page: this.page.pageIndex,
                        limit: this.page.pageSize,
                    })
                    this.loading = false
                    this.page.total = res.data.totalCount
                    this.tableData = res.data.list
                } catch (e) {
                    this.loading = false
                }

                //切换页码刷新 清空单选内容
                this.clearRadio();
            },
            //自定义的索引
            tableRowClassName({ row, rowIndex }) {
                // 把每一行的索引放进row
                row.index_seq =
                    rowIndex + 1 + this.page.pageSize * (this.page.pageIndex - 1)
            },
            //用户行号选择事件
            handlerSelection(row) {
                this.$emit('selectionChage', row)
            },
            //单选框
            getCurrentRow(row){
                this.$emit('selectionChage', row);
            },
            //
            clearRadio(){
                this.radio = '';
                this.$emit('selectionChage',{});
            },
            //每页条数事件
            pageSizeChange(page) {
                this.page.pageSize = page
                this.updateTable()
            },
            //页码事件
            pageIndexChange(page) {
                this.page.pageIndex = page
                this.updateTable()
            }
        }
    }
</script>

<style lang="less" scoped = "scoped">
    .pagination {
        padding-bottom: 20px;
    }

</style>

<style lang="less">
    .template_radio{
        .el-radio__label{
            display: none;
        }
    }
</style>
